<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">


        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        // 3.2 指定图表的配置项和数据
        let option = {
            // 0.标题
            title: {
                text: '班级每组工资',
                top: 10,
                left: 50,
            },
            // 1.网格（类似于padding）
            grid: {
                top: 60, bottom: 30, left: '7%', right: '7%'
            },
            // 2.鼠标移入提示
            tooltip: {
                trigger: 'item',
            },
            // 3.x轴
            xAxis: [
                {
                    type: 'category',
                    data: ['张三', '李四', '王五', '小明', '小红', '小赵'],
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: '#999'
                    }
                }
            ],
            // 4.y轴
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                }
            ],
            // 5.颜色
            color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: '#34D39A' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                }
            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0, color: '#499FEE' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                }
            ])],
            // 6.内容
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    name: '期望薪资'
                },
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    name: '就业薪资'
                }
            ]
        }


        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>